<template>
  <div>
		<h1>this->vue组件实例(viewmodel)</h1>
		<h2>{{count}}, {{arr}}</h2>
		<button @click="add">获取this</button>
		<br>
    <h1>事件修饰符</h1>
    <div @click="parent" class="father">
      <div @click.stop="child" class="son"></div>
    </div>
    <div>
      <a @click.prevent="go" href="http://www.baidu.com"></a>
    </div>
    <p @click.once="go">事件只会触发一次</p>
    <hr />
    <h2>按键修饰符</h2>
    <p><input type="text" @keyup.enter="handlerEnter" /></p>
    <p><input type="text" @keyup.space="handlerEnter" /></p>
  </div>
</template>

<script>
export default {
	data(){
		return {
			count: 1,
			data: [2]
		}
	},
  methods: {
		/**
		 * this作用：
		 * 1.调用methods中的其他方法
		 * 2.获取data中定义的变量的值-->数据驱动试图
		 */
		add(){
			console.log('vue实例',this);
			this.go();
			console.log('获取变量的值：', this.count);
			this.count = Math.random() * 100;
			this.arr.push(Math.floor(Math.random() * (100 - 50 + 1) + 50));
		},
    handlerEnter() {
      console.log("按下回车键");
    },
    go() {
      console.log(123);
    },
    parent() {
      console.log("父盒子回调");
    },
    child() {
      console.log("子盒子回调");
    },
  },
};
</script>

<style>
.father {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-color: pink;
}

.son {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}

p {
  cursor: pointer;
}
</style>